@import "colors";

.mosaic-btn {
  display: inline-block;
  text-decoration: none !important;
  border: 2px solid #fff;
  border-radius: 30px;
  padding: 10px 25px;
  font-size: medium;
  font-weight: bold;
  margin: 1rem 1rem 1rem 0;
  transition: all 0.16s ease;
  text-shadow: 1px 1px rgba(0,0,0,0.3);
  box-shadow: inset 1px 1px 1px 0 rgba(255,255,255,0.4), 1px 1px 1px 0 rgba(0,0,0,0.4);
  &:hover, &:focus {
    background-color: #fff;
    color: $mosaic-purple;
  }
  i {
    transition: all 0.16s ease;
    margin-right: 0.3rem;
  }
}
table .mosaic-btn {
  margin: 0;
}

.mosaic-btn-light {
  color: $mosaic-purple !important;
  border-color: #fff;
  background-color: #fff;
  box-shadow: none;
  text-shadow: none;
  @extend .gradient-white-darken;

  &:hover, &:focus {
    background-color: transparent;
    color: #fff !important;
    border-color: #fff;
    background-image: none;
  }
}

.mosaic-btn-primary {
  color: #fff;
  border-width: 0;
  background-image: linear-gradient(-45deg, #68145C 0%, #BB86B3 100%);
  @extend .gradient-orange-purple;

  &:hover, &:focus {
    color: #fff;
    background-image: linear-gradient(-45deg, #872E51 0%, #F88D2B 210%);
  }
}

.mosaic-btn-secondary {
  color: #fff;
  border-width: 0;
  background-image: linear-gradient(-45deg, #57114d -30%, #751667 40%);

  &:hover, &:focus {
    color: #fff;
    background-image: linear-gradient(-45deg, #872E51 0%, #F88D2B 210%);
  }
}
